<template>
  <div
    class="app-container"
    style="width:100%;height:100%;"
  >
    <el-aside style="padding-right: 10px;height:100%; padding-left: 15px; padding-top: 0px;float:left;width:20%;background:none;">
     <div class="block" style="width:100%;height:100%;">
       <el-input v-model="filterText" style="width:100%;margin-bottom: 10px" placeholder="关键字过滤" clearable />
       <el-tree
          id="el-tree"
          ref="tree"
          class="filter-tree"
          :filter-node-method="filterNode"
          :data="data2"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          @node-contextmenu="rightClick"
        />
      </div>
    </el-aside>
    <!-- 分割线 -->
    <el-divider direction="vertical" />
    <el-aside style="padding-right: 5px; padding-left: 15px; padding-top: 0px;float:left;width:80%;color:#fff;background:none;">
      <div class="filter-container" style="margin-top:0px;padding-bottom: 0px;">
        <div class="box1">
<!--          <el-button class="filter-item" icon="el-icon-circle-plus-outline" type="primary" @click="handleAddGroup">目录管理</el-button>-->
          <el-button class="filter-item" icon="el-icon-upload" type="primary" @click="uploadFile()">单文件上传</el-button>
          <el-button class="filter-item" icon="el-icon-upload" type="primary" @click="uploadFiles()">多文件上传</el-button>
        </div>

        <div class="box2">
          <el-input
            v-model="queryPage.name"
            class="filter-item"
            placeholder="文档名"
            style="width: 150px"
            clearable
          />
          <el-tooltip
            class="item"
            content="查询"
            placement="top"
            effect="light"
          >
            <el-button
              class="filter-item"
              icon="el-icon-search"
              type="primary"
              @click="search()"
            />
          </el-tooltip>
          <el-button
            class="filter-item"
            icon="el-icon-thumb"
            type="primary"
            @click="handleRetrieval"
          >高级检索</el-button>
        </div>
      </div>

      <el-table
        v-show="displayVisible"
        v-loading="listLoading"
        :data="numList"
        :height="tableHeight4"
        tooltip-effect="dark"
        style="width: 100%; overflow:auto;color:#474a4d;font-family:黑体;font-weight:normal;font-size:14px"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        @cell-dblclick="tableDbEdit"
      >
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="80px"
        />
        <el-table-column
          header-align="center"
          align="left"
          label="文档名"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
<!--            <img-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Folder-02.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
            <label style="margin-left:40px;width:160px;">
              <label>{{ scope.row.originalName }}</label>
            </label>

            <label style="position: absolute;right:40px;display:none;color:#409eff;">
              <label
                class="btn3"
                @click.stop="download(scope)"
              >
                <i
                  class="el-icon-download"
                  title="下载"
                />
              </label>
              <label
                v-show="scope.row.shareFlag !== null"
                class="btn3"
                @click.stop="copy(scope,'复制到','file',true)"
              >
                <i
                  class="el-icon-copy-document"
                  title="复制"
                />
              </label>
              <label
                v-if="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="handleEdit1(scope)"
              >
                <i
                  class="el-icon-edit"
                  title="编辑"
                />
              </label>
              <label
                v-if="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="handleAuth(scope)"
              >
                <i
                  class="el-icon-share"
                  title="分享"
                />
              </label>
            </label>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="大小"
          width="100px"
        >
          <span>-</span>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="创建人员"
          width="180px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createuserName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="创建时间"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.createtimeTi }}
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-if="displayVisible1"
        v-loading="listLoading"
        :data="userList"
        :height="tableHeight4"
        style="width: 100%; overflow:auto; font-size: 14px; font-family: 黑体;color: #474a4d;font-weight:100;"
        tooltip-effect="dark"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        @cell-dblclick="tableDbEdit"
      >
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          label="序号"
          width="80px"
        />
        <el-table-column
          header-align="center"
          align="center"
          label="文档名"
          show-overflow-tooltip
        >
          <template slot-scope="scope">

<!--            <img-->
<!--              v-if="!scope.row.suffix"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Folder-02.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="scope.row.suffix==='docx' || scope.row.suffix==='doc'"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Word.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="scope.row.suffix==='xlsx' || scope.row.suffix==='xls'"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Excel.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="['png','jpeg','jpg'].includes(scope.row.suffix)"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Picture.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="['mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v'].includes(scope.row.suffix)"-->
<!--              style="position: absolute;top:14px;"-->
<!--              src="@/assets/images/Video.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="['mp3','flac','wav','flac'].includes(scope.row.suffix)"-->
<!--              style="position: absolute;top:14px;"-->
<!--              src="@/assets/images/Voice.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="scope.row.suffix==='pdf'"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/PDF.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="scope.row.suffix==='ppt' || scope.row.suffix==='pptx'"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/PPT.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="scope.row.suffix==='txt'"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/TXT.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-if="['zip','rar','7z'].includes(scope.row.suffix)"-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Zip.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
<!--            <img-->
<!--              v-else-->
<!--              style="position: absolute;top:14px"-->
<!--              src="@/assets/images/Unknown.png"-->
<!--              width="18px"-->
<!--              height="18px"-->
<!--            >-->
            <label style="margin-left:40px;width:160px;">
              <span v-if="['png','jpeg','jpg','pdf','docx','doc','txt','ppt','pptx','xlsx','xls','mp4','mpeg','avi','navi','asf','mov','3gp','wmv','divx','xvid','rm','rmvb','flv','f4v','mp3','flac','wav','flac'].includes(scope.row.suffix)">
                <a
                  style="color:#606266;"
                  target="_blank"
                  @click="yulan(scope)"
                  v-html="scope.row.originalName"
                />
              </span>
              <span v-else>{{ scope.row.originalName }}</span>
            </label>
            <label style="position: absolute;right:0;display:none;color:#409eff">
              <label
                class="btn3"
                @click.stop="download(scope)"
              >
                <i
                  class="el-icon-download"
                  title="下载"
                />
              </label>
              <label
                v-show="scope.row.shareFlag !== null"
                class="btn3"
                @click.stop="copy(scope,'复制到','file',true)"
              >
                <i
                  class="el-icon-copy-document"
                  title="复制"
                />
              </label>
              <label
                v-if="!scope.row.suffix"
                v-show="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="handleEdit1(scope)"
              >
                <i
                  class="el-icon-edit"
                  title="编辑"
                />
              </label>
              <label
                v-else
                v-show="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="editFile(scope)"
              >
                <i
                  class="el-icon-edit"
                  title="编辑"
                />
              </label>
              <label
                v-if="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="handleAuth(scope)"
              >
                <i
                  class="el-icon-share"
                  title="分享"
                />
              </label>
              <label
                v-if="scope.row.shareFlag === null"
                class="btn3"
                @click.stop="ShowHidden = !ShowHidden"
              >
                <i
                  class="el-icon-more-outline"
                  title="更多"
                />
              </label>
              <label
                v-if="ShowHidden"
                class="btn1"
              >
                <label
                  v-if="scope.row.shareFlag === null"
                  class="btn2"
                  @click.stop="copy(scope,'移动到','file',false)"
                >
                  <i
                    class="el-icon-rank"
                    title="移动"
                  /> <span>移动</span>
                </label>
                <label
                  class="btn2"
                  @click.stop="copy(scope,'复制到','file',true)"
                >
                  <i
                    class="el-icon-copy-document"
                    title="复制"
                  /> <span>复制</span>
                </label>
                <label
                  v-if="scope.row.shareFlag === null"
                  class="btn2"
                  @click.stop="removeFi(scope)"
                >
                  <i
                    class="el-icon-delete-solid"
                    title="删除"
                  /> <span>删除</span>
                </label>
                <label
                  v-if="scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="history(scope)"
                >
                  <i
                    class="el-icon-s-data"
                    title="历史记录"
                  /> <span>历史记录</span>
                </label>
                <label
                  v-if="scope.row.type === 'U' && scope.row.isEdit === '2' && scope.row.suffix !== '' && scope.row.suffix !== 'null'"
                  class="btn2"
                  @click.stop="evaluateList(scope)"
                >
                  <i
                    class="el-icon-star-on"
                    title="查看评价"
                  /> <span>查看评价</span>
                </label>
              </label>
            </label>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="大小"
          width="100px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.fileSize === '-'">-</span>
            <span v-else>{{ scope.row.fileSize }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="创建人员"
          width="180px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createuserName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="right"
          label="创建时间"
          width="180px"
        >
          <template slot-scope="scope">
            {{ scope.row.createtimeTi }}
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="displayVisible1 && total>-1"
        :total="total"
        :page.sync="queryPage.page"
        :limit.sync="queryPage.limit"
        @pagination="loadList"
      />

      <el-dialog
        :visible.sync="addGroupVisible"
        append-to-body
        width="1000px"
        title="目录管理"
        :close-on-click-modal="false"
      >
        <addGroup
          v-if="addGroupVisible"
          ref="addGroup"
          style="height:540px"
          :visible.sync="addGroupVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogEditVisible"
        width="600px"
        append-to-body
        :show-close="false"
        :title="'重命名'"
        :close-on-click-modal="false"
      >
        <dialog-edit
          v-if="dialogEditVisible"
          ref="dialogEdit"
          :proid="code"
          :visible.sync="dialogEditVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="uploadFileVisible"
        width="800px"
        append-to-body
        :show-close="false"
        :title="'单文件上传'"
        :close-on-click-modal="false"
      >
        <upload-file
          v-if="uploadFileVisible"
          ref="uploadFile"
          :link="linkId"
          :flag="flag"
          :visible.sync="uploadFileVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="uploadFilesVisible"
        width="800px"
        :close-on-click-modal="false"
        append-to-body
        :show-close="false"
        :title="'多文件上传'"
      >
        <upload-files
          v-if="uploadFilesVisible"
          ref="uploadFiles"
          :link="linkId"
          :flag="flag"
          :visible.sync="uploadFilesVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="editFileVisible"
        width="800px"
        append-to-body
        :show-close="false"
        :title="'编辑'"
        :close-on-click-modal="false"
      >
        <edit-file
          v-if="editFileVisible"
          ref="editFile"
          :proid="code"
          :visible.sync="editFileVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="historyVisible"
        width="1200px"
        append-to-body
        :title="'历史记录'"
        :close-on-click-modal="false"
      >
        <history
          v-if="historyVisible"
          ref="history"
          :history="batchCode"
          :visible.sync="historyVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="evaluateListVisible"
        width="1000px"
        append-to-body
        :title="'评价列表'"
        :close-on-click-modal="false"
      >
        <evaluate-list
          v-if="evaluateListVisible"
          ref="evaluateList"
          :proid="code"
          :visible.sync="evaluateListVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="xmViewVisible"
        append-to-body
        width="640px"
        title="预览"
        :close-on-click-modal="false"
      >
        <xm-view
          v-if="xmViewVisible"
          ref="xmView"
          :proid="code"
          :visible.sync="xmViewVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="viewPdfVisible"
        append-to-body
        width="1200px"
        title="预览"
        :close-on-click-modal="false"
      >
        <view-pdf
          v-if="viewPdfVisible"
          ref="viewPdf"
          :proid="code"
          :visible.sync="viewPdfVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogAuthVisible"
        append-to-body
        width="640px"
        title="文档分享"
        :close-on-click-modal="false"
      >
        <dialogAuth
          v-if="dialogAuthVisible"
          ref="dialogAuth"
          :proid="code"
          :flag="type"
          :visible.sync="dialogAuthVisible"
        />
      </el-dialog>

      <el-dialog
        :visible.sync="dialogTreeVisible"
        :title="handleMoveTitle"
      >
        <dialogTree
          v-if="dialogTreeVisible"
          ref="dialogTree"
          style="height:540px"
          :proid="typeFlag"
          :operation="operationCopy"
          :dataform="dataDialog"
          :visible.sync="dialogTreeVisible"
        />
      </el-dialog>
      <!-- 一级节点右键菜单 -->

      <div v-show="menu0Visible">
        <ul id="menu0" >
          <li id="menu_item" class="el-icon-circle-plus-outline" @click="handleAdd">
            <el-link :underline="false">新增子目录</el-link>
          </li>
        </ul>
      </div>
      <div v-show="menu0VisibleChild">
        <ul id="menu1">
          <li id="menu_item" class="el-icon-circle-plus-outline" @click="handleAddGroup2">
            <el-link :underline="false"  >新增子目录</el-link>
          </li>
          <li id="menu_item" class="el-icon-edit-outline" @click="handleEditGroup">
            <el-link :underline="false">编辑目录</el-link>
          </li>
          <li id="menu_item" class="el-icon-delete" @click="handleDelete">
            <el-link :underline="false">删除目录</el-link>
          </li>
        </ul>
      </div>
      <div v-show="menu0VisibleChild3">
        <ul id="menu2">
          <li id="menu_item" class="el-icon-edit-outline" @click="handleEditGroup">
            <el-link :underline="false">编辑目录</el-link>
          </li>
          <li id="menu_item" class="el-icon-delete" @click="handleDelete">
            <el-link :underline="false">删除目录</el-link>
          </li>
        </ul>
      </div>
    </el-aside>

    <el-dialog title="新增子目录" :visible.sync="addGroup" append-to-body :close-on-click-modal="false" :show-close="false" width="600px">
      <Add v-if="addGroup" ref="addGroup" :proid="dataId" :proName="dataName" :visible.sync="addGroup" />
    </el-dialog>


    <el-dialog title="新增子目录" :visible.sync="addGroupChild" append-to-body :close-on-click-modal="false" :show-close="false" width="600px">
      <add-group-child v-if="addGroupChild" ref="addGroupChild" :proid="dataId" :proName="dataName"  :visible.sync="addGroupChild" />
    </el-dialog>

    <el-dialog title="编辑子目录" :visible.sync="editGroupChild" append-to-body :close-on-click-modal="false" :show-close="false" width="600px">
      <edit-group-child v-if="editGroupChild" ref="editGroupChild"
                        :proid="dataId" :proName="dataName"
                        :proParentId="dataParentId"
                        :proSortNum="dataSortNum"
                        :visible.sync="editGroupChild" />
    </el-dialog>
  </div>
</template>

<script>
import { getFileShare, getFileShareFirst, downloadFile, download, saveQuantity, saveRecords } from '@/api/publicFile'
import {getTreePersonalList, getTreeList2, deleteInLogic, disabled} from '@/api/publicCatalog'
import { Message, MessageBox } from 'element-ui'
import { tableHeight4 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import AddGroup from '../grwd/addGroup'
import DialogEdit from '../grwd/edit' // eslint-disable-line no-unused-vars
import UploadFile from '../grwd/uploadFile' // eslint-disable-line no-unused-vars
import EditFile from '../grwd/uploadFile1' // eslint-disable-line no-unused-vars
import history from '../grwd/history' // eslint-disable-line no-unused-vars
import evaluateList from '../grwd/evaluateList' // eslint-disable-line no-unused-vars
import XmView from '../grwd/viewPhoto' // eslint-disable-line no-unused-vars
import ViewPdf from '../grwd/viewPdf' // eslint-disable-line no-unused-vars
import DialogAuth from '../grwd/authority' // eslint-disable-line no-unused-vars
import UploadFiles from '../grwd/uploadFiles' // eslint-disable-line no-unused-vars
import DialogTree from '../grwd/copyTree' // eslint-disable-line no-unused-vars
import Add from "@/views/ggzy/grwd/add.vue";
import AddGroupChild from "@/views/ggzy/grwd/addGroupChild.vue";
import EditGroupChild from "@/views/ggzy/grwd/editGroupChild.vue";
export default {
  name: 'Zzjg',
  components: {
    EditGroupChild,
    AddGroupChild,
    Add, Pagination, AddGroup, DialogEdit, UploadFile, EditFile, history, evaluateList, XmView, ViewPdf, DialogAuth, UploadFiles, DialogTree },
  mixins: [ tableHeight4 ],
  defaultProps: {
    children: 'SubTypes',
    label: 'TypeName',
    id: 'TypeId'
  },

  provide() {
    return {
      getList: this.onloadList
    }
  },
  data() {
    return {
      handleMoveTitle: '',
      dialogTreeVisible: false,
      listLoading: false,
      displayVisible: false,
      total: 0,
      displayVisible1: false,
      userList: [],
      numList: [],
      seen: true,
      filterText: '',
      addGroupVisible: false,
      dialogEditVisible: false,
      uploadFileVisible: false,
      uploadFilesVisible: false,
      editFileVisible: false,
      evaluateListVisible: false,
      historyVisible: false,
      xmViewVisible: false,
      viewPdfVisible: false,
      dialogAuthVisible: false,
      menu0Visible:false,
      menu0VisibleChild:false,
      menu0VisibleChild3:false,
      addGroup: false, // 控制新增目录弹出框
      delGroupChild: false,
      addGroupChild: false,
      editGroupChild: false,

      parentDialogId: '', // 移动或复制的父id
      departmentDialogId: '', // 移动或复制的部门id
      dataDialog: {}, // 移动或复制的数据
      data: [],
      data2: [],
      dataPersonal: [],
      queryPage: {
        page: 1,
        limit: 20,
        name: '',
        shareFlag: ''
      },
      form: {},
      rules: {
        typeName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      name: '',
      code: '',
      dataId:'',
      dataName:'',
      dataParentId:'',
      dataSortNum:'',
      flag: '',
      batchCode: '',
      parent: '',
      parentId: '',
      parentName: '',
      linkId: null,
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      ShowHidden: false,
      // 面包屑导航
      a: [],
      // 内容区标题
      contitle: '',
      // 内容区信息
      contents: {
        content: '',
        uptime: ''
      },
      // tree规定数据格式
      treeProps: {
        label: 'title',
        children: 'children'
      },
      // 内容区id
      contentid: '',
      onetitle: '',
      oneid: '',
      breadList: [], // 面包屑数组
      breadLabel: '', // 面包屑文字
      image: '',
      img1: require('@/assets/images/Folder-01.png'),
      img2: require('@/assets/images/Word.png'),
      img3: require('@/assets/images/Word.png'),
      img4: require('@/assets/images/Picture.png'),
      img5: require('@/assets/images/Video.png'),
      img6: require('@/assets/images/Voice.png'),
      img7: require('@/assets/images/PDF.png'),
      img8: require('@/assets/images/PPT.png'),
      img9: require('@/assets/images/TXT.png'),
      img10: require('@/assets/images/Zip.png'),
      img11: require('@/assets/images/Unknown.png'),
      type: '',
      shareFlag: ''
    }
  },
  created() {
    this.gftIdnew = this.$route.query.gftId
    this.getList()
    this.getTreeList()
    this.onLodding()
  },
  mounted() {
    document.addEventListener('click', this.HiddenClick)
  },
  watch: {
    filterText(val) {
      console.log(val,"111111")
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    onloadList() {
      // 重新加载表格
      this.getTreeList()
      this.loadList()
    },


    onLodding() {
      if (this.gftIdnew !== null && this.gftIdnew !== 'null' && this.gftIdnew !== '' && this.gftIdnew !== undefined) {
        this.displayVisible = false
        this.displayVisible1 = true

        this.queryPage.type = this.gftIdnew
        this.queryPage.flag = 'U'
        getFileShare(this.queryPage).then(response => {
          const { data } = response

          this.userList = data.records
          this.total = parseInt(data.total)
          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      }
    },
    getList() {
      this.displayVisible = true
      this.displayVisible1 = false
      getFileShareFirst().then(response => {
        this.numList = response.data
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    hlfp(scope) {
      this.displayVisible = false
      this.displayVisible1 = true

      this.queryPage.type = scope.row.gftId
      this.queryPage.flag = 'U'
      getFileShare(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    search() { // 查询
      this.displayVisible = false
      this.displayVisible1 = true

      this.loadList()
    },
    // 节点过滤
    filterNode(value, data) {
      console.log(value,data,"@@@@@@@@@")
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    getTreeList() { // 加载列表
      this.data = []

      getTreeList2().then(response => {
        this.data = response.data

        this.data2 = this.buildTree2(this.data)

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })

      getTreePersonalList().then(response => {
        this.data = response.data

        this.dataPersonal = this.buildTree2(this.data)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    loadList() { // 加载列表
      this.userList = []
      this.listLoading = true

      this.queryPage.flag = 'U'
      getFileShare(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    // 新增应用
    handleAdd() {
      this.parentId = 1
      this.addGroup = true // dialog对话窗口打开
    },
    handleAddGroup() {
      this.addGroupVisible = true
      this.$nextTick(() => {
        this.$refs.addGroup
      })
    },
    handleDelete() {
      console.log(this.dataId, "当前要删除的节点 ID");
      if (!this.dataId) {
        Message({
          message: '请选择一个子目录进行删除',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }

      MessageBox.confirm('确定要删除该目录吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用后端接口删除子目录
        disabled({ ids: this.dataId, status: '-1' }).then(response => {
            Message({
              message: '删除成功',
              type: 'success',
              duration: 5 * 1000
            })
            // 更新树形结构
          this.onloadList()
          this.getList()
          this.getTreeList()
        }).catch(error => {
          Message({
            message: error.message || '删除失败',
            type: 'error',
            duration: 5 * 1000
          })
        })
      }).catch(() => {
        // 用户取消删除
        Message({
          message: '删除操作已取消',
          type: 'info',
          duration: 5 * 1000
        })
      })
    },

    handleAddGroup2() {
      this.parentId = 1
      this.addGroupChild = true // dialog对话窗口打开
    },
    handleEditGroup(scope) {
      // this.code = scope.row.gftId
      this.editGroupChild = true // dialog对话窗口打开
    },
    handleRetrieval() {
      this.$router.push({
        path: '/all/ggzy/gjjs', query: { menuId: 'U' }
      })
    },
    handleEdit1(scope) {
      this.dialogEditVisible = true
      this.code = scope.row.gftId
      this.$nextTick(() => {
        this.$refs.dialogEdit
        this.$refs.dialogEdit.getDetailed()
      })
    },
    handleNodeClick(data, node) {
      // 关闭右键弹出框
      this.closeRightClick()
      this.displayVisible = false
      this.displayVisible1 = true

      this.linkId = data.id
      this.flag = data.flag
      this.parent = data.parentId
      this.shareFlag = data.shareFlag

      this.queryPage.type = data.id
      this.queryPage.flag = this.flag
      this.queryPage.shareFlag = data.shareFlag
      getFileShare(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    renderContent: function(h, {
      node,
      data,
      store
    }) {
      var text = data.typeName
      if (!data.suffix) {
        this.image = this.img1
      } else if (data.suffix === 'docx' || data.suffix === 'doc') {
        this.image = this.img2
      } else if (data.suffix === 'xlsx' || data.suffix === 'xls') {
        this.image = this.img3
      } else if (['png', 'jpeg', 'jpg', 'PNG', 'JPEG', 'JPG'].includes(data.suffix)) {
        this.image = this.img4
      } else if (['mp4', 'mpeg', 'avi', 'navi', 'asf', 'mov', '3gp', 'wmv', 'divx', 'xvid', 'rm', 'rmvb', 'flv', 'f4v'].includes(data.suffix)) {
        this.image = this.img5
      } else if (['mp3', 'flac', 'wav', 'flac'].includes(data.suffix)) {
        this.image = this.img6
      } else if (data.suffix === 'pdf') {
        this.image = this.img7
      } else if (data.suffix === 'ppt' || data.suffix === 'pptx') {
        this.image = this.img8
      } else if (data.suffix === 'txt') {
        this.image = this.img9
      } else if (['zip', 'rar', '7z'].includes(data.suffix)) {
        this.image = this.img10
      } else {
        this.image = this.img11
      }
      if (text.length > 15) {
        return (
          < span >
            < i > <img src={this.image} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px'/></i>
            <el-tooltip class='item' id='tool' effect='light' popper-class='draw' visible-arrow='false' content={data.typeName} placement='bottom'>
              <span class='style-demo' >{data.typeName}</span >
            </el-tooltip>
          </span>)
      } else {
        return (
          < span >
            < i > <img src={this.image} style='width: 18px;height: 18px;margin-right:5px;padding-top:1px'/></i>
            <span class='style-demo' >{data.typeName}</span >
          </span>
        )
      }
    },

    // 右键点击
    rightClick(MouseEvent, object, Node, element) {
      this.DATA = object; // 当前节点的数据
      this.NODE = Node; // 当前节点对象
      console.log("```````````",this.NODE.data.id,this.NODE.data.typeName,Node)
      this.dataId = this.NODE.data.id;
      this.dataParentId = this.NODE.data.parentId;
      this.dataSortNum=this.NODE.data.sortNum;
      this.dataName = this.NODE.data.typeName;
      console.log(this.NODE.data.sortNum,this.NODE.data,"this.NODE.data.parentId")
      // 判断是否是一级节点
      if (this.NODE.level === 1) {
        this.menu0VisibleChild = false;
        this.menu0VisibleChild3=false;
        this.menu0Visible = true; // 显示一级节点的右键菜单
        var menu0 = document.querySelector('#menu0');
        document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        menu0.style.display = 'block';
        menu0.style.left = MouseEvent.clientX + 30 + 'px'; // 右键弹出框横向位置
        menu0.style.top = MouseEvent.clientY - 10 + 'px'; // 右键弹出框纵向位置
      }else if (this.NODE.level === 2) {
        this.menu0Visible = false; // 隐藏一级节点的右键菜单
        this.menu0VisibleChild = true; // 显示二级节点的右键菜单
        this.menu0VisibleChild3=false;// 隐藏三级节点的右键菜单
        var menu1 = document.querySelector('#menu1')
        document.addEventListener('click', this.foo)
        menu1.style.display = 'block'
        menu1.style.left = MouseEvent.clientX + 30 + 'px'
        menu1.style.top = MouseEvent.clientY - 10 + 'px'
      } else {
        this.menu0Visible = false;
        this.menu0VisibleChild = false;
        this.menu0VisibleChild3=true;
        var menu2 = document.querySelector('#menu2')
        document.addEventListener('click', this.foo)
        menu2.style.display = 'block'
        menu2.style.left = MouseEvent.clientX + 30 + 'px'
        menu2.style.top = MouseEvent.clientY - 10 + 'px'
      }
    },
    // 取消鼠标监听事件 菜单栏
    foo() {
      this.menu0Visible = false; // 关闭右键菜单
      this.menu0VisibleChild = false;
      this.menu0VisibleChild3 = false;
      console.log(this.menu0Visible,this.menu0VisibleChild)
      document.removeEventListener('click', this.foo); // 及时移除监听事件
    },
    // 新增节点
    addNewNode() {
      const newNode = {
        typeName: '新节点', // 新节点的名称，可以根据需求修改
        id: Date.now().toString(), // 新节点的唯一标识，这里使用时间戳
        parentId: this.NODE.parentId, // 父节点的 ID
        children: [] // 新节点可能有子节点
      };

      // 如果是根节点（parentId 为 1），直接添加到 data2 中
      if (this.NODE.parentId === '1') {
        this.data2.push(newNode);
      } else {
        // 如果是子节点，找到对应的父节点并添加到其 children 中
        const parentNode = this.findNodeById(this.data2, this.NODE.parentId);
        if (parentNode && !parentNode.children) {
          parentNode.children = [];
        }
        parentNode.children.push(newNode);
      }

      // 可以在这里调用接口将新节点保存到后端
      console.log('新增节点：', newNode);
    },
    // 递归查找节点
    findNodeById(nodes, id) {
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === id) {
          return nodes[i];
        }
        if (nodes[i].children) {
          const result = this.findNodeById(nodes[i].children, id);
          if (result) return result;
        }
      }
      return null;
    },
    handleIn(id, node, data) {
      this.flag = data.flag
      this.queryPage.type = id
      this.queryPage.flag = this.flag
      getFileShare(this.queryPage).then(response => {
        const { data } = response
        this.userList = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    uploadFile() {
      if (this.shareFlag !== null && this.shareFlag !== '') {
        Message({
          message: '当前节点不允许上传文件！',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        if (this.parent !== '-1') {
          if (this.linkId !== null && this.linkId !== '') {
            this.uploadFileVisible = true
            this.$nextTick(() => {
              this.$refs.uploadFile
            })
          } else {
            Message({
              message: '请选择节点！',
              type: 'error',
              duration: 5 * 1000
            })
          }
        } else {
          Message({
            message: '请选择子节点！',
            type: 'error',
            duration: 5 * 1000
          })
        }
      }
    },
    editFile(scope) {
      this.editFileVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.editFile
      })
    },
    history(scope) {
      this.historyVisible = true
      this.batchCode = scope.row.batchCode
      this.$nextTick(() => {
        this.$refs.history
      })
    },
    evaluateList(scope) {
      this.evaluateListVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.evaluateList
      })
    },
    yulan(scope) {
      this.$router.push({
        path: '/ggzy/yulan', query: { menuId: scope.row.id }
      })

      saveQuantity({ fileId: scope.row.id, views: '1' }).then(response => {
      })

      saveRecords({ fileId: scope.row.id, flag: '1' }).then(response => {
      })
    },
    removeCa(scope) {
      MessageBox.confirm('确认删除', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteInLogic({ ids: scope.row.id, status: '-1' }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          this.onloadList()
        }).catch(response => {
          loading.close()
          this.loadList()
        })
      })
    },
    removeFi(scope) {
      MessageBox.confirm('确认删除', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteInLogic({ ids: scope.row.id, status: '-1' }).then(response => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          loading.close()
          this.onloadList()
        }).catch(response => {
          loading.close()
          this.onloadList()
        })
      })
    },
    handleDisable() {
      MessageBox.confirm('确认删除', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        deleteInLogic({ ids: this.linkId, status: '-1' }).then(response => {
          if (response.code === '20000') {
            Message({
              message: '删除成功',
              type: 'success',
              duration: 5 * 1000
            })
          }
          loading.close()
          this.onloadList()
          this.getList()
        }).catch(response => {
          loading.close()
          this.onloadList()
          this.getList()
        })
      })
    },
    download(scope) {
      if (!scope.row.suffix) {
        const loading = this.$loading({
          lock: true,
          text: '下载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        download({ id: scope.row.id }).then(response => {
          var fileName = 'download.zip'
          const contentDisposition = response.headers['content-disposition']
          if (contentDisposition) {
            fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
          }

          const blob = new Blob([response.data], {
            type: `application/zip` // word文档为msword,pdf文档为pdf
          })
          const objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = objectUrl
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)
          loading.close()
        }).catch(() => {
          loading.close()
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '下载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        downloadFile({ id: scope.row.id }).then(response => {
          loading.close()
          var fileName = scope.row.originalName
          const contentDisposition = response.headers['content-disposition']
          if (contentDisposition) {
            fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
          }
          const blob = new Blob([response.data], {
            type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
          })
          const objectUrl = URL.createObjectURL(blob)
          const link = document.createElement('a')
          link.href = objectUrl
          link.setAttribute('download', fileName)
          document.body.appendChild(link)
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)

          saveQuantity({ fileId: scope.row.id, downloads: '1' }).then(response => {
          })

          saveRecords({ fileId: scope.row.id, flag: '2' }).then(response => {
          })
        })
      }
    },
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false
    },
    // 鼠标划入展示
    enter() {
      this.seen = true
      this.ShowHidden = false
    },
    // 鼠标移除隐藏
    leave() {
      this.seen = false
      this.ShowHidden = false
    },
    // 鼠标移入行
    cellMouseEnter(row, column, cell, event) {
      // 显示操作条  找一个特殊的条件判断，否则影响其他元素
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'inline'
        this.ShowHidden = false
      }
    },
    cellMouseLeave(row, column, cell, event) {
      // 隐藏操作条
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'none'
        this.ShowHidden = false
      }
    },
    handleAuth(scope) {
      this.dialogAuthVisible = true
      this.type = 'U'
      if (!scope.row.suffix) {
        this.code = scope.row.id
      } else {
        this.code = scope.row.batchCode
      }
      this.$nextTick(() => {
        this.$refs.dialogAuth
        this.$refs.dialogAuth.getDetailed()
      })
    },
    tableDbEdit(row, column, cell, event) {
      if (column.label === '文档名') {
        this.displayVisible = false
        this.displayVisible1 = true

        this.queryPage.type = row.gftId
        this.queryPage.flag = 'U'
        this.queryPage.shareFlag = row.shareFlag
        getFileShare(this.queryPage).then(response => {
          const { data } = response

          this.userList = data.records
          this.total = parseInt(data.total)
          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      }
    },
    copy(scope, title, type, cOm) {
      this.dataDialog = scope.row
      this.dialogTreeVisible = true
      this.handleMoveTitle = title
      this.operationCopy = cOm
      if (this.dataDialog.suffix !== '') {
        this.typeFlag = 'file'
      } else {
        this.typeFlag = 'catalog'
      }
    },
    uploadFiles() {
      if (this.shareFlag !== null && this.shareFlag !== '') {
        Message({
          message: '当前节点不允许上传文件！',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        if (this.parent !== '-1') {
          if (this.linkId !== null && this.linkId !== '') {
            this.uploadFilesVisible = true
            this.$nextTick(() => {
              this.$refs.uploadFiles
            })
          } else {
            Message({
              message: '请选择节点！',
              type: 'error',
              duration: 5 * 1000
            })
          }
        } else {
          Message({
            message: '请选择子节点！',
            type: 'error',
            duration: 5 * 1000
          })
        }
      }
    },
    // 关闭右键弹窗
    closeRightClick() {
      this.menu0Visible = false
      this.menu0VisibleChild = false;
      this.menu0VisibleChild3 = false;
    }
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
label {
  font-weight: normal;
}
/* 右键会选中文字，为了美观将它禁用*/
#el-tree {
  user-select: none;
    height:100%;
}
#el-tree >>>.style-demo{
  color: #474a4d;
  font-size:14px;
  font-family: "黑体";
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.el-tree-node__label {
  font-size: 14px;
  font-family: "黑体";
  color: #474a4d;
  font-weight: 100;

}
/* 分割线长度 */
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 89%;
  position: absolute;
  margin-top: -18px;
}
.filter-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.box1 {
  flex: 1;
  padding-left: 25px;
  vertical-align: middle;
}
.box2 {
  flex: 1;
  text-align: end;
}


li span {
  padding-left: 5px;
  color: #828282;
}
#menu_item {
  line-height: 20px;
  text-align: left;
  margin-top: 10px;
  display: inherit;
  color: #409eff;
}
.el-breadcrumb {
  font-size: 14px;
  font-family: "黑体";
  color: #909399;
  font-weight: 100;
  padding: 10px 0px 10px 20px;
}

.el-breadcrumb >>> .el-breadcrumb__inner {
  color: #606266;
  font-size: 14px;
  font-family: "黑体";
  font-weight: 200;
}
.el-breadcrumb >>> .el-breadcrumb__inner a:hover{
cursor: pointer;
}
.btn1 {
  margin-top: 25px;
  margin-left: 60px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  right: 0;
  color: #409eff;
  border: 1px solid #ccc;
  z-index: 999;
  text-align: left;
}
.btn2 {
  padding: 5px 10px;
  margin: 0px 0px;
  cursor: pointer;
  text-align: left;
  display: block;
  border-bottom: 1px solid #ccc;
}
.btn2 span {
  color: #828282;
}
.btn3 {
  margin: 0px 5px;
  cursor: pointer;
  display: inline-block;
}

#menu0 {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0 10px 5px 10px;
  list-style: none;
text-align: center;
}
#menu1 {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0 10px 5px 10px;
  list-style: none;
  text-align: center;
}

#menu2 {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0 10px 5px 10px;
  list-style: none;
  text-align: center;
}
.app-container {
  position: relative; /* 相对定位 */
  margin-top: 10px;
}



</style>
